<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
		<link rel="stylesheet" href="assets/app/css/app.css">
	</head>
	<body>
		<div id="section_container">
			<section id="button_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>按钮组件</h1>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:44px;bottom:0px;">
					<div class="scroller padded">  
						<div class="section-title">普通button</div>
						<button>按钮</button>
						<button class="submit">确定按钮</button>
						<button class="cancel">取消重置按钮</button>
						<button class="disable">禁用按钮</button>
						<button class="link">链接</button>
						
						<button class="outline">按钮</button>
						<button class="submit outline">确定按钮</button>
						<button class="cancel outline">取消重置按钮</button>
						<button class="disable outline">禁用按钮</button>
						<button class="link outline">链接</button>
						
						<div class="section-title">带图标button</div>
						
						<button>
							<i class="iconfont iconline-home"></i>
							<span>按钮</span>
						</button>
						<button class="submit">
							<i class="iconfont iconline-rdo-tick"></i>
							<span>提交</span>
						</button>
						<button class="cancel">
							<i class="iconfont iconline-rdo-cancel"></i>
							<span>取消</span>
						</button>
						<button class="link">
						  <span class="iconfont iconline-rdo-add"></span>
						  <span>添加</span>
						</button>
						
						
						<div class="section-title">带气泡button</div>
						<button>
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						<button class="submit">
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						<button class="cancel">
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						<button class="outline">
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						<button class="submit outline">
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						<button class="cancel outline">
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						
						<div class="section-title">大按钮</div>
						<button class="block">按钮</button>
						<button class="block submit">
							<i class="iconfont iconline-rdo-tick"></i>
							<span>提交</span>
						</button>
						<button class="block cancel">取消重置按钮</button>
						<button class="block outline">按钮</button>
						<button class="block submit outline">
							<i class="iconfont iconline-rdo-tick"></i>
							<span>提交</span>
						</button>
						<button class="block cancel outline">取消重置按钮</button>
						
						<div class="section-title">图标按钮</div>
						<button class="round onlyicon"><i class="iconfont iconline-home"></i></button>
						<button class="submit rect onlyicon"><i class="iconfont iconline-rdo-tick"></i></button>
						<button class="cancel onlyicon"><i class="iconfont iconline-rdo-cancel"></i></button>
						
						<div class="section-title">3D按钮</div>
						<button class="btn-3dshadow left">
							<i class="iconfont iconline-home"></i>
							<span>按钮</span>
						</button>
						<button class="btn-3dshadow left">按钮</button>
						<button class="btn-3dshadow left">
							<span>按钮</span>
							<span class="tip">1</span>
						</button>
						<button class="onlyicon cancel btn-3dshadow left"><i class="iconfont iconline-rdo-cancel"></i></button>
						<div class="clearfix"></div>
						
				   		<div class="section-title">Toggle按钮</div>
				   		<div class="toggle" data-role="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
				   		<div class="toggle notext" data-role="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
				   		<div class="toggle classic" data-role="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
				   		<div class="toggle classic notext" data-role="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
				   		<div class="toggle ios" data-role="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
				   		<div class="toggle ios notext" data-role="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
    				</div>  

				</article>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
		
	</body>
</html>